<template>
  <div class="map-page">
    <div ref="dom" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts"
import { ref, defineProps, reactive, onMounted } from "vue"
const props = defineProps({
  ProblemData: {
    type: Object,
    required: true
  }
})
const dom = ref(null)
const initCharts = () => {
  const seriesList = props.ProblemData.map((e) => {
    const item = {
      name: e.ItemName,
      value: e.TotalCount
    }
    return item
  })

  const charts = echarts.init(dom.value)
  const option = {
    grid: {
      x: "7%",
      y: "15%",
      x2: "3%",
      y2: "7%",
    },
    series: [
      // 画外部描述的饼图
      {
        type: "pie",
        roseType: "area",
        radius: "85%",
        center: ["50%", "50%"],
        data: seriesList,
        label: {
          //文字部分 显示内容为{b}：{c}可以换自己像显示的
          //最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
          //{hr|}为圆点显示内容
          formatter: "{a|{b} ({c})}\n{hr|}",
          //折线图文字颜色
          color: "#fffdef",
          rich: {
            //圆点位置大小配置
            hr: {
              //auto自定义
              backgroundColor: "auto",
              borderRadius: 3,
              width: 3,
              height: 3,
              padding: [3, 3, 0, -12],
            },
            a: {
              padding: [-12, 10, -20, 15],
            },
          },
        },
        labelLine: {
          show: true,
          length: 1, // 第一段线 长度
          length2: 20, // 第二段线 长度
          align: "right",
          lineStyle: {
            type: "dashed",
          },
        },
      },
      // 画内部百分比的饼图
      {
        type: "pie",
        roseType: "area",
        data: seriesList,
        label: {
          show: true,
          position: "inside",
          formatter: `{d}%`,
          color: "#ffffff",
        },
      },
    ],
  }
  option && charts.setOption(option)
}
onMounted(() => {
  initCharts()
})
</script>

<style lang="scss" scoped>
.map-page {
  height: 100%;
  width: 100%;
}
</style>
